<template>
    <div>
        <Row style="margin-bottom: 20px;">
            <Col span="5">
            <Card style="width:250px; height: 140px;">
                <p slot="title">今日学生签到总数</p>
                <div class="card-list">
                    <p><span class="card-big-font">2,021</span></p>
                    <p style="font-size: 14px;padding-top: 10px;">
                                      总学生数
                        <span class="card-span-color"><span>2,029</span> 
                            <Icon type="md-trending-up" /></span>
                    </p>
                </div>
            </Card>
             </Col>
            <Col span="5" offset="1">
            <Card style="width:250px; height: 140px;">
                <p slot="title">今日教师签到数</p>
                <p><span class="card-big-font">200</span></p>
                <p style="font-size: 14px;padding-top: 10px;">
                    总教师人数
                    <span class="card-span-color"><span>212人</span> 
                        <Icon type="logo-usd" /></span>
                </p>
            </Card>
            </Col>
            <Col span="5" offset="1">
            <Card style="width:250px; height: 140px;">
                <p slot="title">今日系统访客</p>
                <p><span class="card-big-font">1,803</span></p>
                <p style="font-size: 14px;padding-top: 10px;">
                    总访客
                    <span class="card-span-color"><span>29万</span> 
                        <Icon type="ios-flag" /></span>
                </p>
            </Card>
            </Col>
            <Col span="5" offset="1">
            <Card style="width:250px; height: 140px;">
                <p slot="title">今日明星老师</p>
                <p style="font-size: 14px;">
                    No.1  <span>Hajnal</span> 
                    <Icon type="ios-ribbon" /></span>
                </p>
                <p style="font-size: 14px;">
                    No.2  <span>Lucy</span> 
                    <Icon type="ios-ribbon-outline" /></span>
                </p>
                <p style="font-size: 14px;">
                    No.3  <span>Jannie</span> 
                    <Icon type="md-ribbon" /></span>
                </p>
            </Card>
            </Col>
        </Row>
        <Row>
            <Col span="11">
            <Card style="width:1066px; height: 350px;">
                <div id="main" :style="{width:'500px',height: '300px'}" style="float: left;"></div>
                <div id="echarts" :style="{width:'500px', height: '300px'}" style="float: left;"></div>
            </Card>
            </Col>
        </Row>
    </div>
</template>
 
<script>
     import echarts from 'echarts'
    export default {
        data() {
            return {
                isCollapsed: false,
                charts: ''
            };
        },
        methods: {
            drawPie(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '每月学生参加活动的人数'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} /次'
                        }
                    },
                    series: [{
                        name: '活动人次',
                        type: 'line',
                        data: [200, 500, 2028,2017, 2016, 2016,800, 2020, 2026, 1000, 1688, 2024]
                    }]
                })
            },
            drawPie2(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '每月教师参加活动的人次'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 次'
                        }
                    },
                    series: [{
                        name: '次数',
                        type: 'line',
                        stack: '总量',
                        itemStyle: {
                            normal: {
                                color: '#99CCFF',
                                lineStyle: {
                                    color: '#99CCFF'
                                }
                            }
                        },
                        data: [20, 200, 168, 150, 100, 80, 90, 60, 120, 115, 68, 99]
                    }]
                })
            }
        },
        //调用
        mounted() {
            this.$nextTick(function() {
                this.drawPie('main')
                this.drawPie2('echarts')
            })
        },
        computed: {
            menuitemClasses: function() {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        }
    }
</script>
 
<style scoped="scoped">
    .card-big-font {
        font-size: 36px;
        color: #666;
        line-height: 36px;
        padding: 5px 0 10px;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
        margin-bottom: 5px;
    }
 
    .card-span-color {
        position: absolute;
        right: 15px;
    }
</style>